<template>
<div class="main">
  <div class="mybox">
    <div class="init">
      <div class="title1">
        <div :style="{ backgroundImage: `url(${v.cover})` }" class="img"></div>
        <h1 class="text33">{{v.name}}</h1>
      </div>

      <div class="containul">
      <ul class="lists">
          <li class="tex">歌曲列表</li>
      </ul>
      </div>


      <ul class="table">
        <li v-for="tab in tableData" class="lis" @click="add(tab)">
          <div :style="{ backgroundImage: `url(${tab.cover})` }" class="imgl"></div>
          <div class="text">{{tab.name}}</div>
          <div class="text tex2">{{tab.artist}}</div>
        </li>
      </ul>

    </div>
  </div>

</div>
</template>

<script>
import {mapState,mapGetters} from 'vuex'
export default {
  name: "List",
  data() {
    return {
      v:{

      },
      tableData: [
        {
          cover: "",
          name: "",
          artist: ""
        },
      ]
    }
  },
  created() {
    let _this = this;
    axios.get('http://localhost:8181/getrandom').then(function (resp) {
      _this.tableData = resp.data
    });
  },
  watch: {
    getRandomData: function (li) {
      this.set();
    }
  },
  computed:{
    ...mapGetters(['getRandomData'])
  },
  methods:{
    set(){
      this.v=this.$store.getters.getRandomData;
    },
    add(tab){
      this.$store.commit('setSongListData',tab)
    }
  }
}
</script>

<style scoped>
.main{
  box-sizing: border-box;
  position: fixed;
  z-index: 500;
  background: rgba(255, 255, 255, 1);
  overflow-y: hidden;
  top: 80px;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  height: 100%;
}
.mybox{
  width: 660px;
  margin: 40px auto;
  background-color: #fff;
  border: 1px solid #eaeaea;
  position: relative;
}
.init{
  box-sizing: border-box;
  padding: 40px 30px 35px 50px;
}
.title1{
  display: flex;
  box-sizing: border-box;
}
.img{
  height: 114px;
  width: 114px;
  display: inline-block;
  background-size: contain;
}
.lists{
  list-style: none;
  font-size: 13px;
  color: #9b9b9b;
  line-height: 14px;
  display: flex;
}
.containul{
  margin-top: 15px;
  border-bottom: 1px solid #eaeaea;
}
.tex{
  list-style: none;
  float: left;
  text-align: center;
  margin-right: 30px;
  margin-bottom: 10px;
}
.lis{
  width: 100%;
  display: flex;
  height: 45px;
  border-bottom: 1px solid #eaeaea;
}
.imgl{
  margin-top: 5px;
  width: 36px;
  height: 36px;
  background-size: cover;
}
.text{
  margin-left: 5px;
  margin-right: 15px;
  margin-top: 10px;
  font-weight: 400;
  font-size: 14px;
  color: #030303;
  line-height: 21px;

}
.tex2{
  font-weight: 400;
  color: #64646c;
  font-size: 10px;
}
.text33{
  color: #4a4a4a;
  font-weight: 500;
  margin: 0;
  font-size: 24px;
  line-height: 27px;
}

li:hover{
  background: linear-gradient(91deg,#f1eefc,#9dc6ff 70%,#a5bcff);
}



</style>